<template>
	<view>
		<!-- 右边字母选择导航条 -->
		<view class="searchLetter touchClass" :style="{height:itemH * searchLetter.length + 'px',
		paddingRight:paddingRight + 'px',width:searchLetterWidth + 'px',top:letterPositionTop + 'px'}">
		  <view v-for="(item,index) in searchLetter" :style="{height:itemH + 'px'}" :key="index" 
				:data-letter="item.name" @touchstart.stop.prevent="searchStart" 
				@touchmove.stop.prevent="searchMove" @touchend.stop.prevent="searchEnd">{{item.name}}</view>
		</view>
		
		<!-- 字母选择提示框 -->
		<block v-if="isShowLetter">
			<view class="showSlectedLetter">{{showLetter}}</view>
		</block>
		
		<!-- 通讯录列表 -->
		<scroll-view scroll-y :style="{height:usableHeight + 'px'}" :scrollTop="scrollTop">
			<slot name="addressBookList"></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		name:'addressBookNavigation',
		props:{
			//通讯录名字集合
			bookList:{
				type:Array,
				required:true
			},
			//索引集合
			letter:{
				type:Array,
				default(){
					return ["A", "B", "C", "D","E", "F", "G", "H","I", "J", "K", "L", "M", "N","O", "P", "Q", "R", "S", "T","U","V", "W", "X", "Y", "Z"]
				}
			},
			// # 占空的距离
			bookTop:{
				type:Number,
				default(){
					return 40
				}
			},
			//通讯录索引字母显示高度
			bookKeyHeight:{
				type:Number,
				default(){
					return 80
				}
			},
			//通讯录名字显示高度
			bookItemHeight:{
				type:Number,
				default(){
					return 120
				}
			},
			//右边索引条右边距
			paddingRight:{
				type:Number,
				default(){
					return 0
				}
			},
			//右边索引条距离
			searchLetterTop:{
				type:Number,
				default(){
					return 40
				}
			},
			//右边索引条宽度
			searchLetterWidth:{
				type:Number,
				default(){
					return 40
				}
			},
			//底部tab高度  使用原生导航栏固定为50px  自定义tab传入自定义tab高度  单位为px
			tabHeight:{
				type:Number,
				default(){
					return 50
				}
			},
			//导航栏高度
			navHeight:{
				type:Number,
				default(){
					return 44
				}
			}
		},
		data(){
			return {
				searchLetter:[],
				//右边索引条单个字母元素高度
				itemH:0,
				//可滑动区域高度
				usableHeight: 0,
				screenWidth:0,
				isShowLetter:false,
				showLetter:"",
				scrollTop:0,
				badPageY:0,
				letterPositionTop:0,
				scrollViewPositionTop:0
			}
		},
		mounted() {
			//#ifdef H5
			this.letterPositionTop = this.navHeight + this.searchLetterTop
			this.scrollViewPositionTop = this.navHeight + this.searchLetterTop
			//#endif
			//#ifndef H5
			this.letterPositionTop = this.navHeight + this.searchLetterTop
			this.scrollViewPositionTop = this.navHeight + this.searchLetterTop
			//#endif
			this.countLetterHeight()
		},
		methods:{
			//计算和记录右边每个搜索字母的高度和位置
			countLetterHeight(){
				const sysInfo = uni.getSystemInfoSync()
				//#ifdef H5
				const usableHeight = sysInfo.screenHeight - this.tabHeight - this.navHeight
				//#endif
				//#ifndef H5
				const usableHeight = sysInfo.screenHeight - this.tabHeight - this.navHeight - sysInfo.statusBarHeight
				//#endif
				this.screenWidth = sysInfo.screenWidth
				const letter = this.letter
				const itemH = (usableHeight - this.letterPositionTop) / letter.length
				const tempObj = []
				for (let i = 0; i < letter.length; i++) {
					tempObj.push({
						name:letter[i],
						tHeight:i * itemH,
						bHeight:(i + 1) * itemH
					})
				}
				this.usableHeight = usableHeight
				this.itemH = itemH
				this.searchLetter = tempObj
			},
			searchEnd (e) {
				const that = this
				setTimeout(() => that.isShowLetter = false,500)
			},
			//点击选择
			searchStart (e) {
				const pageY = e.touches[0].pageY - (this.letterPositionTop - this.navHeight)
				this.nowLetter(pageY)
			},
			//滑动选择
			searchMove (e) {
				const pageY = e.touches[0].pageY - (this.letterPositionTop - this.navHeight)
				const pageX = e.touches[0].pageX
				if((this.screenWidth - pageX) > (this.searchLetterWidth + this.paddingRight)){
					this.isShowLetter = false
					return
				}
				if(pageY < 0 || pageY > this.itemH * this.searchLetter.length){
					this.isShowLetter = false
					return
				}
				this.nowLetter(pageY)
			},
			//计算当前选中的字母并显示
			nowLetter (pageY) {
				const letterData = this.searchLetter
				for (let i = 0; i < letterData.length; i++) {
					if (letterData[i].tHeight <= pageY && pageY <= letterData[i].bHeight) {
						this.showLetter = letterData[i].name
						// this.isShowLetter = true
						break
					}
				}
				this.scrollPage(this.showLetter)
			},
			//计算要滑动的距离
			countScrollTop (showLetter) {
				let scrollTop = 0
				let itemCount = 0
				let keyCount = 0
				for (let item of this.bookList) {
					if (showLetter == item.key) {
						scrollTop = keyCount * uni.upx2px(this.bookKeyHeight) + itemCount * uni.upx2px(this.bookItemHeight)
						break
					} else {
						keyCount++
						itemCount += item.list.length
					}
				}
				return scrollTop - this.bookTop
			},
			//页面滑动到与选中字母对应的位置
			scrollPage(showLetter){
				const scroll = this.countScrollTop(showLetter)
				if(scroll != 0 || showLetter == this.bookList[0].key)
					this.scrollTop = scroll
			}
		},
	}
</script>

<style lang="scss" scoped>
	.searchLetter{
	  position: fixed;
	  right: 0;
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  color: #666;
	  z-index: 1;
	}
	.touchClass{
	  color: #5A5A5A;
	  font-size: 28rpx;
	}
	.showSlectedLetter{
		background-color: rgba(0, 0, 0,0.5);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top:50%;
		left: 50%;
		margin: -100rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius:10rpx;
		font-size: 44rpx;
		z-index: 1
	}
	scroll-view{
		position: fixed;
		width: 100%;
	}
</style>
